<template>
    <div class="jifen_in banxin">
        <ul class=" tanxin">
            <li>
                <h4>签到得积分</h4>
                <div>去签到</div>
                <img src="../../assets/images/home/integral-01.png" alt="">
            </li>
            <li>
                <h4>购课得积分</h4>
                <div>去购课</div>
                <img src="../../assets/images/home/integral-02.png" alt="">
            </li>
            <li>
                <h4>推荐得积分</h4>
                <div>去推荐</div>
                <img src="../../assets/images/home/integral-03.png" alt="">
            </li>
            <li>
                <h4>拼团得积分</h4>
                <div>去拼团</div>
                <img src="../../assets/images/home/integral-04.png" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data () {
        return {}
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.jifen_in {
    margin-bottom: 40px;
    ul {
        li {
            cursor: pointer;
            position: relative;
            color: #FFFFFF;
            overflow: hidden;
            h4 {
                font-size: 24px;                
                font-weight: bold;
                line-height: 23px;
                position: absolute;
                top: 43px;
                left: 20px;
            }
            div {
                width: 96px;
                height: 27px;
                border: 1px solid #FFFFFF;
                font-size: 16px;
                font-weight: 300;
                line-height: 27px;
                text-align: center;
                position: absolute;
                top: 91px;
                left: 21px;
            }
            img {
                transition: 1s;
                position: relative;
                z-index: -1;
            }
            &:hover {
                img {
                    transform: scale(1.10);
                    transition: 1s;
                }
                div {
                    background: #FFFFFF;
                    color: #000;
                    border: 1px solid #000;
                } 
            }
        }
    }
}
</style>